@page "/agents/editor/{serviceId}/step/{stepId}"
@using AyBorg.Web.Pages.Agent.Shared
@using SDK.Authorization
@attribute [Authorize(Roles = $"{Roles.Administrator}, {Roles.Engineer}, {Roles.Reviewer}")]

@if (_step.Id == Guid.Empty)
{
    <PageTitle>Step</PageTitle>
}
else{
    <PageTitle>Step - @_step.Name</PageTitle>
}

<MudToolBar Class="px-0">
    <MudGrid>
        <MudItem xs="4">
            <MudStack Spacing="5" Row>
                <MudTooltip Text="Back">
                    <MudFab StartIcon="@Icons.Material.Filled.ArrowBackIosNew" Color="Color.Primary" Size="Size.Small"
                        OnClick="BackClicked" />
                </MudTooltip>
                <MudText Typo="Typo.h6" Class="pt-1">@_step.Name</MudText>
            </MudStack>
        </MudItem>
        <MudItem xs="4">
            @if (!string.IsNullOrEmpty(_serviceUniqueName))
            {
                <RuntimeToolbar ServiceUniqueName="@_serviceUniqueName" />
            }
        </MudItem>
        <MudItem xs="4" Class="overflow-y-auto" Style="height: 60px">
            @foreach (var category in _step.Categories.Order())
            {
                <MudChip Size="Size.Small" Text="@category" Style="float: right" Disabled/>
            }
        </MudItem>
    </MudGrid>
</MudToolBar>

<div class="page-loading-bar">
    <MudProgressLinear Color="Color.Primary" Indeterminate="true" Class="my-0" hidden="@(!_isLoading)" />
</div>

<MudGrid Class="grid-container">
    @* Inputs *@
    <MudItem sm="12" md="3" Class="mud-full-height">
        <MudCard Style="height: calc(100vh - 148px)" Class="rounded-lg">
            <MudCardHeader>
                <CardHeaderAvatar>
                    <MudIcon Icon="@Icons.Material.Filled.Input" />
                </CardHeaderAvatar>
                <CardHeaderContent>
                    <MudText>Inputs</MudText>
                </CardHeaderContent>
            </MudCardHeader>
            <MudCardContent Class="overflow-auto" Style="height: calc(100% - 65px)">
                <MudList>
                    @foreach (var port in _ports.Where(p => p.Direction == SDK.Common.Ports.PortDirection.Input && p.Brand != SDK.Common.Ports.PortBrand.Image))
                    {
                        <MudListItem>
                            <PortResolver Port="@port" Ports="@_ports" Disabled="@(IsDisabled(port))" />
                        </MudListItem>
                    }
                </MudList>
                @if(!_ports.Any(p => p.Direction == SDK.Common.Ports.PortDirection.Input && p.Brand != SDK.Common.Ports.PortBrand.Image))
                {
                    <div class="center relative">
                        <LogoPlaceholder Watermark/>
                        @if(!_isLoading)
                        {
                            <MudAlert Severity="Severity.Info">No <strong>input</strong> ports to display</MudAlert>
                        }
                    </div>
                }
            </MudCardContent>
        </MudCard>
    </MudItem>
    @* Visual content *@
    <MudItem sm="12" md="6" Class="mud-full-height">
        <MudCard Class="mud-full-height">
            <MudCardHeader>
                <CardHeaderAvatar>
                    <MudIcon Icon="@Icons.Material.Filled.Image" />
                </CardHeaderAvatar>
                <CardHeaderContent>
                    <MudText>Visual content</MudText>
                </CardHeaderContent>
            </MudCardHeader>
            <MudCardContent>
                <MudTabs Class="d-block" Centered="true" style="height: calc(100vh - 300px);">
                    @foreach (var imagePort in _ports.Where(p => p.Direction == SDK.Common.Ports.PortDirection.Input && p.Brand ==
                    SDK.Common.Ports.PortBrand.Image))
                    {
                        <MudTabPanel Icon="@Icons.Material.Filled.Input" Text="@imagePort.Name" Class="mud-full-height">
                            <PortResolver Port="@imagePort" Ports="@_ports" Disabled="@(IsDisabled(imagePort))" />
                        </MudTabPanel>
                    }
                    @foreach (var imagePort in _ports.Where(p => p.Direction == SDK.Common.Ports.PortDirection.Output && p.Brand ==
                    SDK.Common.Ports.PortBrand.Image))
                    {
                        <MudTabPanel Icon="@Icons.Material.Filled.Output" Text="@imagePort.Name" Class="mud-full-height">
                            <PortResolver Port="@imagePort" Ports="@_ports" Disabled="@(IsDisabled(imagePort))" />
                        </MudTabPanel>
                    }
                </MudTabs>
            </MudCardContent>
            <MudCardActions>

            </MudCardActions>
        </MudCard>
    </MudItem>
    @* Outputs *@
    <MudItem sm="12" md="3" Class="mud-full-height">
        <MudCard Style="height: calc(100vh - 148px)" Class="mud-full-height">
            <MudCardHeader>
                <CardHeaderAvatar>
                    <MudIcon Icon="@Icons.Material.Filled.Output" />
                </CardHeaderAvatar>
                <CardHeaderContent>
                    <MudText>Outputs</MudText>
                </CardHeaderContent>
            </MudCardHeader>
            <MudCardContent Class="overflow-auto" Style="height: calc(100% - 65px)">
                <MudList>
                    @foreach (var port in _ports.Where(p => p.Direction == SDK.Common.Ports.PortDirection.Output && p.Brand != SDK.Common.Ports.PortBrand.Image))
                    {
                        <MudListItem>
                            <PortResolver Port="@port" Ports="@_ports" Disabled="@(IsDisabled(port))"  />
                        </MudListItem>
                    }
                </MudList>
                @if(!_ports.Any(p => p.Direction == SDK.Common.Ports.PortDirection.Output && p.Brand != SDK.Common.Ports.PortBrand.Image))
                {
                    <div class="center relative">
                        <LogoPlaceholder Watermark/>
                        @if(!_isLoading)
                        {
                            <MudAlert Severity="Severity.Info">No <strong>output</strong> ports to display</MudAlert>
                        }
                    </div>
                }
            </MudCardContent>
        </MudCard>
    </MudItem>
</MudGrid>
